<script setup>
import { reactive, ref } from 'vue';
import UnitByPosition from '@T2/views/Project/Manage/components/tree/unitByPosition.vue';
import UnitInfo from './unitInfo.vue';
import DeviceList from './deviceList.vue';

const currentUnit = ref(null);
const unitChange = (data, node) => {
  currentUnit.value = data;
}
const showUnitSelect = ref(false);
const unitlistChange = (data) => {
  showUnitSelect.value = data.length > 1 ? true : false;
}
</script>

<template>
  <div class="view flex">
    <div class="position" v-show="showUnitSelect">
      <UnitByPosition @current-change="unitChange" @unitlist-change="unitlistChange"/>
    </div>
    <div class="right-container flex-column" v-if="currentUnit">
      <UnitInfo :detail="currentUnit" v-if="showUnitSelect" />
      
      <DeviceList :unit="currentUnit" :ifUnitMul="showUnitSelect" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.view {
  width: 100%;
  height: 100%;
}
.position {
  width: fit-content;
  height: calc(100% - 20px);
  background: #FFFFFF;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.15);
  border-radius: 10px;
  margin: 10px;
}
.right-container {
  flex: 1;
  overflow: hidden;
}
</style>